<template>
  <div class="my-tag">
     <input
      class="input"
      type="text"
      placeholder="输入标签"
      v-if="isShowEdit"
      @blur="handlerBlur"
      @keyup.enter="handlerEnter"
      v-focus
    />
    <div class="text" @dblclick="handlerDb" v-else>
      {{tagName}}
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {
      isShowEdit: false,
      tagName: '茶壶'
    }
  },
  methods:{
    handlerBlur(el) {
     this.setTagName(el)
    },
    setTagName(el){
      if(el.target.value.trim()===''){
        alert("请输入标签")
        return
      }
      this.isShowEdit = false
      this.tagName= el.target.value
    },
    handlerDb(){
      this.isShowEdit = true
    },
    handlerEnter(el){
      this.setTagName(el)
    }
  }
}

</script>
<style scoped>
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>